<template>
  <el-form label-width="80px">
    <el-form-item label="教师工号">
      <el-input type="text" v-model="id" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="text" v-model="password" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item label="教师姓名">
      <el-input
        type="text"
        v-model="name"
        placeholder="填写教师姓名"
      ></el-input>
    </el-form-item>
    <el-form-item label="电话号码">
      <el-input
        type="text"
        v-model="tel"
        placeholder="填写教师电话"
        maxlength="11"
      ></el-input>
    </el-form-item>

    <el-form-item label="性别">
      <el-select v-model="sex" placeholder="请选择" :disabled="isTeacher">
        <el-option
          v-for="item in sexs"
          :key="item.label"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="任课">
      <el-select v-model="subject" placeholder="请选择" :disabled="isTeacher">
        <el-option
          v-for="item in subjects"
          :key="item.label"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <!-- 是否为年级班主任 -->
    <el-form-item label="是否班主任">
      <el-switch v-model="is_class_teacher" @change="handleSwitchChange"/>
    </el-form-item>

    <div v-if="is_class_teacher">
      <el-form-item label="担任年级">
        <el-select v-model="grade" placeholder="请选择">
          <el-option
            v-for="item in setGrade"
            :key="item.label"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="所担任专业名称">
        <el-select v-model="major_id" placeholder="请选择" @change="handleMajorChange">
        <el-option
          v-for="item in majors"
          :key="item.label"
          :label="item.label"
          :value="item.major_ID"
        >
        </el-option>
      </el-select>
      </el-form-item>


      <el-form-item label="所在班级">
        <el-radio-group v-model="activeClass">
          <el-radio :value=item :key=item v-for="item in classList">{{ item }}班</el-radio>

        </el-radio-group>
      </el-form-item>
    </div>


    <el-button type="primary" :icon="Check" @click="create"
      >确认修改</el-button
    >

    <el-button type="danger" @click="showApply">取消</el-button>

  </el-form>
</template>
<script setup>


import { ref , computed ,  onMounted} from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import api from "@/modules/api";
import readUser from "@/modules/common/read-user";
import { Check } from '@element-plus/icons-vue'

import UpdataTeacher from "@/modules/teacher/update-teacher"

import { useStore  } from 'vuex';

const store = useStore();

let route = useRoute();

let isTeacher = ref(localStorage.id == "teacher");

const majors = computed(() => store.state.majors);


onMounted(() => {
  store.dispatch('loadDepartments');
  store.dispatch('loadMajors');
});

let name = ref("");
let tel = ref("");
let sex = ref("男");
let is_class_teacher = ref(false);
let major = ref(null); // 默认专业
let major_id  = ref('');
let grade = ref('2022');
let activeClass = ref("");
let id = ref("");
let password = ref("")
let sexs = ref([
  {
    label: "男",
  },
  {
    label: "女",
  },
]);
let subject = ref("创新与实践");
let subjects = ref([
  {
    label: "创新与实践",
  },
  {
    label: "马克思主义思想",
  },
  {
    label: "高等数学",
  },
  {
    label: "VUE.js",
  },
  {
    label: "Node.js",
  },
  {
    label: "MySQL数据库",
  },
]);

// 所属年级
let setGrade = ref([
  { label: 2022, },
  { label: 2023, },
  { label: 2024, },
]);
let classList = ref(['1','2','3']);


// 选择专业
const handleMajorChange = (value) =>{
  console.log(value);
  major_id.value = value
  const selectedMajor = majors.value.find(major => major.major_ID === major_id.value);
  if (selectedMajor) {
    major.value = selectedMajor.label;
  }
  console.log('+++',selectedMajor.label);
}

//  是否班主任 开关
const handleSwitchChange = (value) =>{

  console.log(value);

  is_class_teacher.value = value;

  if(!value){
    grade.value = '';
    major.value = null;
    major_id.value = '';
    activeClass.value = '';
  }

}


// 
onMounted(()=>{
  // 加载页面时加载
  readTeatcher()

})

const readTeatcher = () =>{

  readUser({
    col: "tb_teacher",
    id: route.query.id,
  }).then((res) => {

    let data = res.res[0];
    name.value = data.name;
    id.value = data.id;
    tel.value = data.tel;
    sex.value = data.sex;
    subject.value = data.subject;
    password.value = data.password;
    is_class_teacher.value = data.is_class_teacher === 1 ? true : false;
    grade.value = data.grade;
    major.value = data.major;
    major_id.value = data.major_id;
    activeClass.value = data.class_name;

  });

}

const create = async () => {
  let telTest = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  let nullTest = /^[\s\S]*.*[^\s][\s\S]*$/;
  let isCreate =
    nullTest.test(name.value) &&
    nullTest.test(tel.value) &&
    telTest.test(tel.value);
  if (isCreate) {

    // 示例调用 UpdataTeacher 函数
    const teacherData = {
        id: id.value, // 教师ID，需要根据具体情况填写
        name: name.value,
        tel: tel.value,
        sex: sex.value,
        subject: subject.value,
        password: password.value,
        is_class_teacher: is_class_teacher.value ? 1 : 0,
        grade: grade.value,
        activeClass: activeClass.value,
        major: major_id.value
    };

    console.log(teacherData);

    const res = await UpdataTeacher(teacherData);

    if (res.success) {
        ElMessage({
          message: `修改成功`,
          type: "success",
        });
      } else {
        ElMessage({
          message: `修改失败`,
          type: "error",
        });
      }
  } else {
    ElMessage.warning({
      message: "请按照正确格式填写全部内容",
      type: "warning",
    });
  }
}



const showApply = () =>{

  window.history.back()

}
</script>
<style scoped lang='scss'>
.el-form-item {
  width: 400px;
  margin: 0px auto;
  margin-top: 30px;
}
.el-button {
  width: 400px;
  margin: 0px auto;
  margin-top: 30px;
  display: block;
}
.el-select {
  margin-top: 0px !important;
  margin-left: 0px !important;
}
</style>